<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .map {
      width: 1000px;
      height: 600px;
      border: 5px solid #333;
      margin: 50px auto;
      position: relative;

      background-image: url(./imgs/bg.png);
      background-repeat: repeat;
      background-size: 20px 20px;
    }

    .map > div {
      width: 20px;
      height: 20px;
      position: absolute;
      background-size: 20px 20px;
      background-repeat: no-repeat;
    }

    .map > .food {
      background-image: url(./imgs/food.png);
    }

    .map > .head {
      background-image: url(./imgs/head.png);
    }

    .map > .body {
      background-image: url(./imgs/body.png);
    }

  </style>

</head>
<body>


  <button>开始</button>
  <button>暂停</button>
  <button>重新开始</button>

  <div class="map" id="map"></div>

  <!-- <script src="./game.js" type="module"></script> -->
  <script type="module">
        import Game from './game.js';
        const g = new Game('#map');
        document.querySelector('button:nth-child(1)').onclick = ()=>{
            g.start()
        }
        document.querySelector('button:nth-child(2)').onclick = ()=>{
            g.pause()
        }

        document.querySelector('button:nth-child(3)').onclick = ()=>{
            g.restart();
        }

        document.addEventListener('keydown',e=>{
            // console.log(e.keyCode);

            switch(e.keyCode){
                case 87:
                case 38:
                    g.changeDir('top');
                    break
                case 83:
                case 40:
                    g.changeDir('bottom');
                    break
                case 65:
                case 37:
                    g.changeDir('left');
                    break
                case 68:
                case 39:
                    g.changeDir('right');
                    break
                case 13:
                    g.start();
                    break
                
                case 32:
                    g.pause();
                    break
                
                
            }
        })
        

  </script>
  <!-- <script src="./food.js"></script>
  <script src="./snake.js"></script>

  <script>
        var food = new Food('#map');
        var snake = new Snake('#map');
  </script> -->

  <!-- 
    面向对象的思想  实现贪吃蛇 

    

    蛇 
        1. 生成一条蛇
        2. 让蛇移动 每次走一格 
        3. 吃食物  舌头是否跟食物重合 
        4. 判断是否越界  
        属性 
            1. 先有个地图 因为蛇要生成在地图上  
            2. 方向   用户控制蛇的方向 蛇向前走 
            3. 准备一个数组 用来组装蛇 

        方法 
            1.创建一条蛇 
            2.增加一节  
            3. 蛇移动  
            4. 蛇是否碰墙了 
            5. 吃食物 

    食物 
        // 1.先有个食物 
        // 2. 随机出现在某个位置  
        // 3. 听 一个指定  生成一个新的事物 出现在随机的位置 
        属性 
            1. 地图 
            2. 创建一个div 食物 
            3. 坐标 x  y  
        方法  
            1. 改变位置  



    游戏规则 
        // 1.通知 食物出现在 随机的位置 
        // 2.通知 创建一条蛇 出现在地图上 

        // 3.用户点击开始 游戏开始 
             用户点击暂停 游戏暂停 
             用户点击重新开始 重新初始化

        // 让用户控制蛇运动的 方向 




   -->

  </body>




</html>